<template>
  <div class="q-design">
    <n-space justify="center">
      <n-card class="q-card">
        <template #header> 回收设置 </template>
        <template #footer>
          <n-divider></n-divider>
          <div style="font-size: 0.5rem; color: #999">
            达到特定限制条件后问卷会自动关闭；如需再次打开，需要重新设定限制条件
          </div>
        </template>
        <n-space vertical>
          <n-space justify="space-between">
            <n-text>时间限制</n-text>
            <n-switch v-model:value="ddlCheck" />
          </n-space>
          <n-space v-if="ddlCheck">
            <n-date-picker
              type="datetime"
              v-model:value="ddl"
              :default-value="Date.now()"
              :is-date-disabled="disablePreviousDate"
              clearable
              format="yyyy/MM/dd HH:mm:ss"
              placeholder="选择截止日期"
            />
          </n-space>
          <n-divider></n-divider>
          <n-space justify="space-between">
            <n-text>问卷密码</n-text>
            <n-switch v-model:value="passwordCheck" />
          </n-space>
          <n-space v-if="passwordCheck">
            <n-input
              v-model:value="password"
              placeholder="请输入密码"
              clearable
            >
            </n-input>
          </n-space>
          <n-divider></n-divider>
          <n-space justify="space-between">
            <n-text>问卷回收数量限制</n-text>
            <n-switch v-model:value="visitLimitCheck" />
          </n-space>
          <n-space v-if="visitLimitCheck">
            <n-input-number
              v-model:value="visitLimit"
              clearable
              placeholder="限制访问几"
              :min="1"
            >
              <template #suffix>次</template>
            </n-input-number>
          </n-space>
          <n-divider></n-divider>
          <n-space justify="space-between">
            <n-text>作答次数限制（单人一次）</n-text>
            <n-switch v-model:value="ipLimit" />
          </n-space>
          <n-divider></n-divider>
          <n-space justify="space-between">
            <n-text>统计用户地理位置</n-text>
            <n-switch v-model:value="getLocation" />
          </n-space>
        </n-space>
      </n-card>
      <n-space vertical>
        <n-card class="q-card">
          <template #header> 问卷显示 </template>
          <n-space vertical>
            <n-space justify="space-between">
              <n-text>问卷显示题号</n-text>
              <n-switch v-model:value="showIndex" />
            </n-space>
            <n-divider></n-divider>
            <n-space justify="space-between">
              <n-text>问卷题目随机</n-text>
              <n-switch v-model:value="randomIndex" />
            </n-space>
            <n-space v-if="randomIndex">
              <n-input-number
                v-model:value="randomStart"
                clearable
                placeholder="从第几题开始随机"
                :min="0"
              >
                <template #prefix>第</template>
                <template #suffix>题之后随机</template>
              </n-input-number>
            </n-space>
            <n-divider></n-divider>
            <n-space justify="space-between">
              <n-text>填写完成后显示投票结果</n-text>
              <n-switch v-model:value="showResult" />
            </n-space>
            <n-divider></n-divider>
            <n-space justify="space-between">
              <n-text>填写完成自定义结束语</n-text>
              <n-switch v-model:value="infoCheck" />
            </n-space>
            <n-space v-if="infoCheck">
              <n-input
                v-model:value="info"
                placeholder="请输入结束语"
                clearable
              >
              </n-input>
            </n-space>
          </n-space>
        </n-card>
        <n-divider></n-divider>
        <n-space justify="center">
          <n-button
            size="large"
            type="primary"
            style="width: 15vw; margin-top: -1vh"
            @click="saveDesign"
            >保存当前设置</n-button
          >
        </n-space>
      </n-space>
    </n-space>
    <n-divider> </n-divider>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, defineAsyncComponent } from 'vue';
import { Ques } from '@api/question';
import { useRouter } from 'vue-router';
import { Settings } from '@vicons/ionicons5';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

// 问卷信息
const id = Number(props.id);
const qStatus = ref(false);
const showIndex = ref(true);
const showResult = ref(false);
const randomIndex = ref(false);
const randomStart = ref(0);
const getLocation = ref(false);
const ipLimit = ref(false);

const ddlCheck = ref(false);
const ddl = ref(Date.now());
const visitLimitCheck = ref(false);
const visitLimit = ref(null);
const passwordCheck = ref(false);
const password = ref('');
const infoCheck = ref(false);
const info = ref('');

onMounted(() => {
  getDesign();
});

// random code
const randomCode = ref('');
const getDesign = () => {
  Ques.designQ({
    id: id,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      (showResult.value = res.data.data.showResult),
        (qStatus.value = res.data.data.qStatus);
      showIndex.value = res.data.data.showIndex;
      randomIndex.value = res.data.data.random;
      if (randomIndex.value) {
        randomStart.value = res.data.data.randomStart;
      }
      getLocation.value = res.data.data.getLocation;
      ipLimit.value = res.data.data.ipLimit;
      if (!res.data.data.ddl) {
        ddl.value = Date.now();
        ddlCheck.value = false;
      } else {
        ddl.value = new Date(res.data.data.ddl).valueOf();
        ddlCheck.value = true;
      }
      if (res.data.data.visitLimit > 0) {
        visitLimitCheck.value = true;
      }
      visitLimit.value =
        res.data.data.visitLimit === -1 ? 1 : res.data.data.visitLimit;
      password.value = res.data.data.password;
      if (password.value) {
        passwordCheck.value = true;
      }
      info.value = res.data.data.info;
      if (info.value) {
        infoCheck.value = true;
      }
    } else {
      window.$message.error(res.data.msg);
    }
  });
};

const saveDesign = () => {
  console.log('提交了', {
    showResult: showResult.value,
    showIndex: showIndex.value,
    password: passwordCheck.value ? password.value : '',
    ddl: ddlCheck.value ? ddl.value : null,
    info: infoCheck.value ? info.value : '',
    visitLimit: visitLimitCheck.value ? visitLimit.value : -1,
    getLocation: getLocation.value,
    random: randomIndex.value,
    ipLimit: ipLimit.value,
  });
  Ques.releaseQ({
    id: id,
    showResult: showResult.value,
    showIndex: showIndex.value,
    password: passwordCheck.value ? password.value : '',
    ddl: ddlCheck.value ? ddl.value : null,
    info: infoCheck.value ? info.value : '',
    visitLimit: visitLimitCheck.value ? visitLimit.value : -1,
    getLocation: getLocation.value,
    random: randomIndex.value,
    randomStart: randomStart.value,
    ipLimit: ipLimit.value,
  }).then((res: any) => {
    console.log(res);
    if (res.data.status === 200) {
      window.$message.success('保存成功');
    } else {
      window.$message.error(res.data.msg);
    }
  });
};
const router = useRouter();

const disablePreviousDate = (ts: any) => {
  return ts + 86400000 < Date.now();
};
</script>

<style scoped lang="scss">
.q-design {
  padding: 1vh 2vh;
  .q-card {
    width: 30vw;
  }
  .qr {
    width: 4vw;
    &-suffix {
      font-size: 0.5em;
      color: #999;
      text-align: center;
    }
  }
  .gap {
    width: 1vw;
  }
}
</style>
